<style lang="sass" scoped>
    .container{
        padding-top:30px;
    }
    #imgDiv{
        width:600px;
        height:600px;
        display:block;
        margin:84px auto 44px;
        // background:#ff0000;
        img{
            width:100%!important;
        }
    }
    .detail{
        text-align:center;
        margin:50px 0 80px;
        p{
            font-size:36px;
            color:#969696;
        }
    }
    .next{
        width:280px;
        height:84px;
        -height:84px;
        text-align:center;
        color:#fff;
        background:#ff7575;
        font-size:34px;
        margin:40px auto;
        border-radius:60px;
    }
    #qrcode{
        display:none;
    }
    .red-text,.text{
        width:600px;
        margin:0 auto;
        font-weight:bold;
    }
    .red-text{
        color:#C10A09;
        font-size:58px;
    }
    .text{
        font-size:38px;
    }
    .text1{
        margin-top:20px;
        margin-bottom:30px; 
    }
</style>
<template>
    <div class="container">
        <div class="red-text">请长按下面的二维码</div>
        <div class="text text1">选择识别二维码并绑定设备</div>
        <div class="text">绑定后就可以使用</div>
        <div class="text">听一听和微信聊天功能了</div>
        <!--canvas中的二维码-->
        <div id="qrcode"></div>
        <!--image形式的二维码-->
        <div id="imgDiv"></div>
    </div>
</template>
<script>
    export default {
        components: {
        },
        data() {
            return {
            }
        },
        watch:{
        },
        created(){

        },
        mounted() {
            this.$nextTick(() => {
                let url = decodeURIComponent(this.$route.query.url)
                this.drawQrcode(url);
            });
        },
        methods: {
            drawQrcode(qrcodeurl){
                function utf16to8(str) { 
                    var out, i, len, c; 
                    out = ""; 
                    len = str.length; 
                    for(i = 0; i < len; i++) { 
                        c = str.charCodeAt(i); 
                        if ((c >= 0x0001) && (c <= 0x007F)) { 
                            out += str.charAt(i); 
                        } else if (c > 0x07FF) { 
                            out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)); 
                            out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F)); 
                            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); 
                        } else { 
                            out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)); 
                            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); 
                        } 
                    } 
                    return out; 
                }
                var qrcodeurl = utf16to8(qrcodeurl)
                //利用插件生成二维码,生成的二维码在canvas中
                $('#qrcode').html('');
                $('#qrcode').qrcode({
                    width: 300,
                    height:300,
                    text: qrcodeurl
                });
                //从canvas中提取图片image
                function convertCanvasToImage(canvas) {
                    //新Image对象，可以理解为DOM
                    var image = new Image();
                    // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
                    // 指定格式PNG
                    image.src = canvas.toDataURL("image/png");
                    image.style.width = '100%'
                    return image;
                }

                //获取网页中的canvas对象
                var mycanvas1=document.getElementsByTagName('canvas')[0];

                //将转换后的img标签插入到html中
                var img = convertCanvasToImage(mycanvas1);
                $('#imgDiv').html('');
                $('#imgDiv').append(img);//imgDiv表示你要插入的容器id
            },
        },
        beforeDestroy(){
        }
    };
</script>